<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>shoppingCart</title>
    <link rel="StyleSheet" href="../css/account.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />

    <script src="/js/jquery-3.6.0.min.js"></script>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
</head>
<body>
<div th:replace="common/top"></div>

<div id="w">
    <div id="Cart">
        <div id="petName"> Shopping Cart </div>
        <div id="cartContent">
            <form action="/updateCart" method="post">
                <table class="shoppingCartTable">
                    <tr>
                        <!--                    <th class="shoppingCartTableHead">&nbsp;</th>-->
                        <th class="shoppingCartTableHead"><b>Item ID</b></th>
                        <th class="shoppingCartTableHead"><b>Product ID</b></th>
                        <th class="shoppingCartTableHead"><b>Description</b></th>
                        <th class="shoppingCartTableHead"><b>In Stock?</b></th>
                        <th class="shoppingCartTableHead"><b>Quantity</b></th>
                        <th class="shoppingCartTableHead"><b>List Price</b></th>
                        <th class="shoppingCartTableHead"><b>Total Cost</b></th>
                        <th class="shoppingCartTableHead">operation</th>
                    </tr>
                    <tr th:if="${cartItemListMap == null}" >
                        <td colspan="9"><b>Your cart is empty.</b></td>
                    </tr>
                    <tr th:each="map:${cartItemListMap}" th:id="${map.getKey().getItemid() + 'tr'}">
                        <td class="shoppingCartTableContent">
                            <a th:href="@{/itemForm(itemId=${map.getValue().itemid})}">
                                <span th:text="${map.getValue().itemid}">item.itemId</span>
                            </a>
                        </td>
                        <td class="shoppingCartTableContent" th:text="${map.getValue().productid}">product.productId</td>
                        <td class="shoppingCartTableContent">
                            <span th:text="${map.getValue().attr1}">item.attribute1</span>
                            <span th:text="${map.getValue().attr2}">item.attribute2</span>
                            <span th:text="${map.getValue().attr3}">item.attribute3</span>
                            <span th:text="${map.getValue().attr4}">item.attribute4</span>
                            <span th:text="${map.getValue().attr5}">item.attribute5</span>
                            <!--                        <span th:text="${map.getValue().productid}">item.product.name</span>-->
                        </td>
                        <td class="shoppingCartTableContent" th:text="${map.getValue().isup ? '1':'0'}">isSock</td>
                        <!--                    <td th:text="${cartItem.inStock}">cartItem.inStock</td>-->
                        <td class="shoppingCartTableContent">
                            <input type="text" class="quantity" th:id="'input' + ${map.getValue().itemid}" th:onblur="change([[${map.getValue().itemid}]]);" th:name="${map.getValue().itemid}" th:value="${map.key.quantity}">
                        </td>
                        <!--                    <td th:text="${#numbers.formatDecimal(cartItem.item.listPrice, 0, 'POINT', 2, 'COMMA', 'en_US')}"></td>-->
                        <td class="shoppingCartTableContent" th:id="'listprice' + ${map.getValue().itemid}" th:text="'$'+ ${map.getValue().listprice}"></td>

                        <td class="shoppingCartTableContent">
                            <label class="total" th:id="'total' + ${map.getValue().itemid}" th:text="'$'+ ${map.getValue().listprice * map.key.quantity}">cartItem.total</label>
                        </td>
                        <td class="shoppingCartTableContent">
                            <a th:onclick="remove([[${map.getValue().itemid}]]);" class="Button">Remove</a>
                        </td>
                    </tr>

                    <tr th:if="${cartItemListMap != null}">
                        <td colspan="7" class="updateCart">
                            Sub Total:
                            <label id="subtotal" >

                            </label>
                        </td>
                        <!--                            cart.subTotal th:text="${map.getValue().unitcost}"-->
                        <td class="updateCart">
                            <!--                        <input type="submit" value="Update Cart" class="Button">-->
                            <a id="addLink" href="/user/newOrder" class="Button">Buy Now</a>
                        </td>

                    </tr>
                </table>
            </form>
            <!--        <a th:if="${sessionScope.cart.numberOfItems > 0}" href="/newOrderForm" class="Button" id="checkout"> Proceed to Checkout</a>-->
            <!--    </div>-->
            <!--    <div id="MyList" th:if="${session.loginAccount != null}">-->
            <!--        <div th:if="${!empty sessionScope.loginAccount.listOption}">-->
            <!--            <div th:replace="cartOrder/includeMyList"></div>-->
            <!--        </div>-->
        </div>

    </div>


    <div id="Separator">&nbsp;</div>
</div>

<div th:replace="common/bottom"></div>
<script th:inline="javascript">
    function remove(itemId) {
        // event.preventDefault();

        $.ajax({
            type: 'POST',
            url: '/user/cart/delete?itemId='+itemId,
            success: function (data) {
                console.log(data);
                if(data.status === 1){
                    var el = document.getElementById(itemId + 'tr');
                    el.remove();
                    console.log("cheng gong")
                }else{
                    console.log("err")
                }
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    }
    function change(itemId) {
        // event.preventDefault();
        var number = $('#input' + itemId).val();
        console.log(number);
        if(number == 0){
            remove(itemId);
        }
        else{
            $.ajax({
                type: 'POST',
                url: '/user/cart/update?itemId='+itemId+'&number='+number,

                success: function (data) {
                    console.log(data);
                    if(data.status === 1){
                        var total = $('#total' + itemId);
                        var listprice = $('#listprice' + itemId).text();
                        console.log(listprice);
                        total.text(number * listprice);
                        console.log("cheng gong")
                    }else{
                        console.log("err")
                    }
                },
                error: function (errorMsg) {
                    console.log(errorMsg);
                }
            });
        }
    }
    const totalPriceLabels = document.querySelectorAll('.total');
    // 初始化总价
    let total = 0;
    // 遍历所有label元素，计算总价
    totalPriceLabels.forEach(label => {
        total += parseFloat(label.innerText.replace('$', ''));
    });
    // 更新Sub Total标签的内容
    document.getElementById('subtotal').innerText = '$' + total;
</script>
</body>
</html>